<template>
  <div class="pillar-query-list h-flex">
    <!-- <a href="javascript:;" class="prev" @click="prevPillarPage"><i class="el-icon-caret-left" /></a> -->
    <div class="pillar-pager-container h-flex h-flex-elastic">
      <div class="pillar-group-container">
        <el-tabs v-model="activeName" type="card" @tab-click="tabclick">
          <el-tab-pane
            v-for="(item, index) in pillarPager"
            :key="index"
            :label="item.siteName"
            :name="`${index}`">
            <div ref="pageContainer" class="pillar-group" :style="scrollStyle">
              <div class="pillar-list h-flex">
                <div v-for="(item2, index2) in item.pillarAttr" :key="index2" class="item" :class="{current: pillarCode === item2.pillarCode }" @click="showcurrentIndex(index,index2,item.siteName)">{{ formatCode(item2.pillarNum) }}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- <a href="javascript:;" class="next" @click="nextPillarPage"><i class="el-icon-caret-right" /></a> -->
    <div class="pillar-seacher">
      <div class="form h-flex">
        <el-input v-model="pillarNum" placeholder="请输入支柱号" @keyup.enter.native="searchByPillar()">
          <i slot="prefix" class="el-input__icon el-icon-search " @click="searchByPillar()" />
        </el-input>
        <!--<input v-model="pillarNum" placeholder="请输入支柱号" class="h-flex-elastic" @keyup.enter="searchByPillar()"><button><i class="el-icon-search" @click="searchByPillar()" /></button>-->
      </div>
      <div class="result-info">当前第{{ currentIndex }}个/总共{{ total }}个支柱</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PillarQueryList',
  props: {
    pillarPager: {
      type: Array
    }
  },
  data() {
    return {
      activeName: '0',
      currentIndex: 0,
      scrollStyle: '', // 用于支柱号分页
      offset: 0, // 用于支柱号分页
      total: 0,
      pillarNum: '',
      pillarCode: ''
    }
  },
  watch: {
    // currentIndex(val) {
    //   const w = this.$refs.pageContainer.offsetWidth
    //   this.offset = val * 45 - w / 2
    //   if (this.offset > 0) {
    //     this.scrollStyle = 'transform: translate3d(-' + this.offset + 'px, 0, 0)'
    //   }
    // },
    pillarPager(val) {
      this.currentIndex = 1
      let sum = 0
      for (let i = 0; i < val.length; i++) {
        sum += val[i].pillarAttr.length
      }
      this.total = sum
      this.showcurrentIndex(0, 0)
    }
  },
  mounted() {
  },
  methods: {
    tabclick() {

    },
    formatCode(val) {
      if (!val) return ''
      return val.toString().replace(/[\W]/g, '')
    },
    showcurrentIndex(index, index2, name) {
      let sum = 0
      for (let i = 0; i < index; i++) {
        sum += this.pillarPager[i].pillarAttr.length
      }
      sum += index2 + 1
      this.currentIndex = sum
      this.pillarCode = this.pillarPager[index].pillarAttr[index2].pillarCode
      if (this.pillarCode) {
        this.$emit('setDeviceCode', this.pillarCode, name, this.pillarPager[index].pillarAttr[index2].pillarNum)
      }
    },
    searchByPillar() {
      let index = -1
      let index2 = -1
      for (let i = 0; i < this.pillarPager.length; i++) {
        const pillarAttr = this.pillarPager[i].pillarAttr
        for (let j = 0; j < pillarAttr.length; j++) {
          if (pillarAttr[j].pillarNum === this.pillarNum) {
            index = i
            index2 = j
          }
        }
      }
      if (index < 0) {
        this.$message({
          message: '没有此支柱号！',
          type: 'warning'
        })
      } else {
        this.activeName = `${index}`
        console.log(this.$refs.pageContainer[index].scrollWidth)
        this.$nextTick(_ => {
          this.$refs.pageContainer[index].scrollLeft = `${index2 * 58}`
          this.showcurrentIndex(index, index2)
        })
      }
    },
    prevPillarPage() {
      this.offset += this.$refs.pageContainer.offsetWidth
      if (this.offset > 0) {
        this.offset = 0
      }
      this.scrollStyle = 'transform: translate3d(-' + this.offset + 'px, 0, 0)'
    },
    nextPillarPage() {
      const w = this.$refs.pageContainer.offsetWidth
      this.offset -= w
      if (this.offset < this.total * 45 - w) {
        this.offset = this.total * 45 - w
      }
      this.scrollStyle = 'transform: translate3d(-' + this.offset + 'px, 0, 0)'
    }
  }
}
</script>

<style lang="scss" scoped>
  .pillar-query-list {
    .prev,.next {
      width: 24px;
      line-height: 80px;
      color: white;
      text-align: center;
      background: #409eff;
    }

    .pillar-pager-container {
      justify-content: flex-start;
      overflow: hidden;
      padding-left:4px;
      border-right: 1px#E4E7ED solid;

      .pillar-group-container {
        width: 100%;
        overflow-x: auto;
        ::v-deep .el-tabs__item{
          height: 32px;
          line-height: 32px;
          color: black;
        }
        ::v-deep .el-tabs__header{
          margin: 0;
        }
        ::v-deep .is-active{
          color: #409eff;
        }
      }

      .pillar-group::-webkit-scrollbar:hover,
      .pillar-group::-webkit-scrollbar {
        width: 0;
        height: 5px;
        background-color: #dfdddd;
        -webkit-transition: background-color 0.3s ease-in-out;
        transition: background-color 0.3s ease-in-out;
      }

      .pillar-group::-webkit-scrollbar-track {
        background-color: #dfdddd;
      }

      .pillar-group::-webkit-scrollbar-thumb,
      .pillar-group::-webkit-scrollbar-thumb:hover,
      .pillar-group::-webkit-scrollbar-thumb:active {
        background-color: #409eff;
        border: 0;
      }

      .pillar-group {
        display: flex;
        width: 100%;
        overflow-x: auto;
        line-height: 34px;

        .item {
          height: 34px;
          margin: 4px 3px 1px 0;
          width: 55px;
          color: #fff;
          text-align: center;
          cursor: pointer;
          background: #409eff;
          &:hover,
          &.current {
            background: #f0bc63;
          }

          &:last-child {
            border-right: 0;
          }
        }

      }
    }

    .pillar-seacher {
      width: 200px;
      padding: 5px;

      .form {
        border: 1px#E4E7ED solid;
        background: white;
        input {
          padding-left: 5px;
          color: black;
          background: transparent;
          border: 0;
          outline: none;
        }

        button {
          width: 30px;
          height: 30px;
          color: black;
          cursor: pointer;
          background: transparent;
          border: 0;
          outline: none;
        }
      }

      .result-info {
        font-size: 14px;
        line-height: 44px;
        color: black;
      }
    }
  }
</style>
